/**
 * 表格操作按钮布局
 * @author xiaoxujs
 * @date 2023-11-13
 */
import { Button, Dropdown } from "antd";

/**
 * 更多
 */
export type IMore = {
    if?: boolean; // 条件
    buttonHtml?: React.ReactNode; //显示按钮
}

export const tableActionButtonLayout = (quan: IMore[]) => {
    //   {/* 
    //     1. 判断判断是否展示
    //     2. 判断外面有几个
    //         1. 一个的时候从更多中提出来一个
    //         2. 两个的时候不变
    //     3. 判断更多里面有几个
    //         1. 更多里面有 不懂
    //         2. 更多里面没有 就隐藏更多
    //     */}
    let newArr: { nei: React.ReactNode[], wai: React.ReactNode[] } = {
        nei: [],
        wai: []
    }
    quan.forEach((element, index) => {
        // if (element.if) {
            if (newArr.wai.length >= 2) {
                newArr.nei.push(element.buttonHtml)
            } else {
                newArr.wai.push(element.buttonHtml)
            }
        // }
    });

    //button下拉
    const items: {
        key: number;
        label: React.ReactNode;
    }[] = [];
    newArr.nei.forEach((element, index) => {
        items.push(
            { key: index, label: element }
        )
    });
    return <>
        {
            newArr.wai.map((element) => element)
        }
        {newArr.nei.length > 0 && <Dropdown menu={{ items }}>
            <Button
                type="link"
            >
                更多<span style={{fontSize:"1.6rem"}} className="iconfont" >&#xe772;</span>
            </Button>
        </Dropdown>}
    </>
}